<template>
	<view class="content">
		<view class="bg-green"></view>
		<view class="x-c header-title">轻奢行</view>
		<!-- <view style="height: 344upx;background: linear-gradient(3deg, #FCC0AB, #FF8A60);"></view> -->
		<view>
			<mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
				<public-module></public-module>
				<!-- <mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"> -->
				<view style="width: 100%; margin: 0 auto;">
					<u-search placeholder="请输入关键字搜索" @search="searchData"  v-model="keyword" search-icon-color="#7a7a7a"
						placeholder-color="#7A7A7A" :show-action="false" bg-color="#ffffff"
						:input-style="{'fontSize': '24' + 'upx', 'width': 'calc(100% - 50rpx)'}" style="width: calc(100% - 50rpx);
				   margin: 0 auto;"></u-search>
				</view>
				<swiper class="swiperlist">
					<!-- <u-swiper :list="swiperlist" name="thumb" @click="swiperlink"></u-swiper> -->
					<swiper-item class="swiper-item" v-for="(item,index) in swiperlist" :key="index">
						<image :src="item.thumb" @click="swiperlink(item)"></image>
					</swiper-item>
				</swiper>
				<!-- 中奖信息 -->
				<!-- <view class="page-section-spacing">
					<swiper :circular="true" class="swiper" :indicator-dots="false" :duration="500">
						<swiper-item v-for="(item, index) in fightGroups" :key="index">
							<view class="swiper-item acion-swiper">
								<view class="biping-box-top">
									<image class="tips-title" style="" src="../../static/images/index/biping.png"></image>
									<view class="user-info text-line1" style="width: 300upx; text-align: right;">
										<image src="../../static/images/tabbar/hot-group-select.png"></image>
										<!-- <text>恭喜 kendg 喜中 iphone... </text>
										<text>喜中{{item.has_one_goods.title}} </text>
									</view>
								</view>
								<view class="goods-box">
									<view class="goods-info">
										<view class="goods-img">
											<image :src="item.has_one_goods.thumb"></image>
										</view>
			
										<view class="goods-detail">
											<view class="goods-name text-line2">{{item.title}} </view>
											<view class="tips" style="color: #FF5E24; font-size: 22upx;">
												{{item.fight_describe}}
											</view>
											<view style="display: flex; align-items: center; margin-top: 3upx;">
												<view style="flex: 1;">
													<u-line-progress height="10" style="height: 11upx; width: 326upx;"
														active-color="#FF4F10"
														:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
														:show-percent="false"></u-line-progress>
												</view>
												<view
													style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 15upx;">
													<text
														style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}}
													</text> /{{item.has_many_option_levels[0]['member_num']}}
												</view>
											</view>
											<view class="price-box">
												<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}
												</view>
												<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次
												</view>
											</view>
											<view class="pingtuan"
												@click="junit('/pages/index/goods-detail/goods-detail', {id: item.fight_id});">
												马上拼</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view> -->
				<u-notice-bar mode="horizontal" :list="noticeList" bg-color="#f8f8f8" color="#0D4731" style="padding: 0 9px;" more-icon @click="getMoreNotice" @getMore="getMoreNotice"></u-notice-bar>
				<swiper class="swiperlist">
					<!-- <u-swiper :list="vipSwiperList" name="thumb" @click="vipSwiperLink"></u-swiper> -->
					<swiper-item class="swiper-item" v-for="(item,index) in vipSwiperList" :key="index">
						<image :src="item.thumb" @click="vipSwiperLink(item)"></image>
					</swiper-item>
				</swiper>
				<!-- <image @click="jumpPage" mode="widthFix" style="width: calc(100% - 50rpx); margin: 0 auto;left: 50%;transform: translateX(-50%);" src="../../static/images/index/vip_bg.png"></image> -->
				<!-- end中奖信息 -->
				<!-- 即将成团  -->
				<view class="jijianchengtuan">
					<view class="chengtuan-tips">
						<view class="left-chengtuan">
							<!-- <image src="../../static/images/index/hot.png" style="width: 34upx; height: 43upx;"></image> -->
							<text class="title">热门拼团 |</text>
							<text class="tips">高品质的生活体验</text>
						</view>
						<view class="right-loding" @click="$Router.push('/pages/index/group-list/group-list')">
							<text>更多好物</text>
							<image style="width: 11upx; height: 19upx;" src="../../static/images/index/loding.png"></image>
						</view>
					</view>
			
					<view class="chengtuan-box">
						<view class="chengtuan-list">
							<view class="chengtuan-item" v-for="(item, index) in homeCollage" :key="index" @click="junit('/pages/index/goods-detail/goods-detail', {id: item.team_id});">
								<view class="goods-img">
									<image :src="item.has_one_goods.thumb"></image>
								</view>
								<view class="goods-detail">
								<view class="goods-name group-title">{{item.title}} </view>
								<view class="group-info x-sc">
									<view class="group-total-memeber">{{item.member_num}}人团</view>
									<!-- <view class="y-cc" style="text-align: center; line-height: 18rpx; margin: 0 auto;">{{item.zj_user_num}}人中奖</view> -->
								</view>
								<!-- <view class="tips" style="color: #FF5E24;">1人拿商品，4人全额退款</view> -->
								<!-- <view style="display: flex; align-items: center; margin-top: 3upx;">
									<u-line-progress style="height: 11upx; width: 326upx;" active-color="#FF4F10"
										:percent="70" :show-percent="false"></u-line-progress>
									<text style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx;"> <text
											style="color: #FF5E24;">1 </text> /5</text>
								</view> -->
								<view class="price-box">
									<view class="price-left">¥<text style="font-size: 30rpx; font-weight: bold;">{{item.group_price}}</text></view>
								</view>
							</view>
								<!-- <view class="goods-detail">
									<view class="goods-name text-line2 group-title">{{item.title}} </view>
									<view class="tips" style="color: #FF5E24;">
										{{item.fight_describe}}
									</view>
									<view style="display: flex; align-items: center; margin-top: 3upx;">
										<!-- <u-line-progress style="height: 11upx; width: 326upx;" active-color="#FF4F10"
										:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
										:show-percent="false"></u-line-progress> -->
										<!-- <view style="flex: 1;">
											<u-line-progress height="10" style="height: 11upx; width: 326upx;"
												active-color="#FF4F10"
												:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
												:show-percent="false"></u-line-progress>
										</view>
										<view
											style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 15upx;">
											<text style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}}
											</text>
											/{{item.has_many_option_levels[0]['member_num']}}
										</view> -->
									<!-- </view> -->
									<!-- <view class="price-box">
										<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}</view>
										<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次</view>
									</view> -->
								<!-- </view> -->
								<view class="right-box"
									>
									<!-- <image class="tips-image" src="../../static/images/tabbar/hot-group-select.png"></image> -->
									<view style="margin-top: 19upx; font-size: 22rpx; color: #BFBEBE;">{{item.team_count}}人已参与</view>
									<!-- <view style="font-size: 16upx; color: #FFFFFF;">
										{{item.ba_team.has_many_success_member_count}}人已领取
									</view> -->
									<view class="right-box-footer">
										<text>去参团</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- end即将成团 -->
				<!-- 登录提示 -->
				
				<!-- </mescroll-body> -->
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	// import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin],
		// mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				tabList: [],
				currentTabId: 0,
				statusBarHeight: 0,
				titleBarHeight: 0,
				
				upOption: {
					page: {
						size: 5 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					auto: false
				},
				params:{
					limit:5,
					page:1,
					type:10
				},
				downOption: {
					auto: true
				},
				keyword: '',
				swiperlist: [], // 轮播图列表
				vipSwiperList: [], // 轮播图列表
				fightGroups: [], // 新人拼团
				homeCollage: [], // 成团列表
				noticeList: []
			}
		},
		onLoad(options) {
			this.getNoticeList();
			if(options.mid) {
				uni.setStorageSync('pid', options.mid);
			}
			if(options.pid) {
				uni.setStorageSync('pid', options.pid);
			}
			if(this.$Route.query.pid) {
				uni.setStorageSync('pid', options.pid);
			}
			// this.init();
			const SystemInfo = wx.getSystemInfoSync();
			this.statusBarHeight = SystemInfo.statusBarHeight;
		},
		onReady() {
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
				uni.getMenuButtonBoundingClientRect().height;
		},
		onShow() {
			this.getCollageTab();
			this.init();
		},
		methods: {
			junit(url, query = {}) {
				if(!query.id) {
					uni.showToast({
						icon: 'none',
						title: '拼团还未开始，请稍候再参加！'
					})
					return ;
				}
				this.$Router.push({
					path: url,
					query: query
				});
			},
			getCollageTab() {
				this.$api.get('/addons/yun_shop/api.php?uuid=0&route=plugin.fight-groups.frontend.controllers.fight-groups.catelist').then(res =>{
					if(res.result == 1) {
						this.tabList = res.data;
					}
				})
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )

			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.init();
				this.mescroll.endBySize(1, 0);
				// this.params.page = page.num;
				// this.$http.get('quotation.main.marketlist',this.params).then(res=>{
				// 		for(let i of res.data.list) {
				// 			i.payType = JSON.parse(i.payType)
				// 		}
				// 		let curPageData = res.data.list;
				// 		let curPageLen = curPageData.length; 
				// 		let totalCount = res.data.totalCount; 
				// 		if(page.num == 1) this.tabList = []; //如果是第一页需手动置空列表
				// 		this.tabList = this.tabList.concat(curPageData); //追加新数据
				// 		this.mescroll.endBySize(curPageLen, totalCount); 
				// })
				// 获取轮播图数据

			},
			init() {
				this.getVipSwiperList();
				this.getswiperlist();
				this.getfightGroups();
				this.getfightGroupsHome();
			},
			// 获取轮播图数据
			getswiperlist() {
				this.$api.get('/addons/yun_shop/api.php?route=home-page.sliads&is_lb=1').then(res => {
					this.swiperlist = res.data
				})
				// this.$http.get('/addons/yun_shop/api.php?route=home-page.sliads&is_lb=1',{i:4, type:7}, {'paramsType': 2}).then(res => {
				// 	this.swiperlist = res.data
				// })
				// 请求示例    url , 所需参数, 项目配置
				// this.$http.get('/addons/yun_shop/api.php?i=3&type=2&route=test.sliads&ingress=weChatApplet&validate_page=1&app_type=wechat',{}, {'paramsType': 2}).then(res => {
				
				// 	this.swiperlist = res.data
				// })
			},
			// 点击轮播图
			swiperlink(e) {
				let jumpLink = e.link;
				if(jumpLink) {
					var jumpvipLink = jumpLink.split('#')[1]
					uni.navigateTo({
						url: jumpvipLink
					});
				}
				
			},
			// 获取轮播图数据F
			getVipSwiperList() {
				this.$api.get('/addons/yun_shop/api.php?route=home-page.sliads&is_lb=3').then(res => {
					this.vipSwiperList = res.data
				})
				// this.$http.get('/addons/yun_shop/api.php?route=home-page.sliads&is_lb=1',{i:4, type:7}, {'paramsType': 2}).then(res => {
				// 	this.swiperlist = res.data
				// })
				// 请求示例    url , 所需参数, 项目配置
				// this.$http.get('/addons/yun_shop/api.php?i=3&type=2&route=test.sliads&ingress=weChatApplet&validate_page=1&app_type=wechat',{}, {'paramsType': 2}).then(res => {
				
				// 	this.swiperlist = res.data
				// })
			},
			// 点击轮播图
			vipSwiperLink(e) {
				let jumpLink = e.link;
				if(jumpLink) {
					var jumpvipLink = jumpLink.split('#')[1]
					uni.navigateTo({
						url: jumpvipLink
					})
				}
			},
			// 新人拼团数据
			getfightGroups() {
				this.$http.get('index.fightGroupsRecommendFight').then(res => {
					this.fightGroups = res.data;
				})
			},
			// 即将成团数据
			getfightGroupsHome() {
				this.$api.get('/addons/yun_shop/api.php?route=home-page.teamlist', {
					page: 1,
					keyword: this.keyword
				}).then(res => {
					this.homeCollage = res.data;
				})
			},
			// 搜索
			searchData () {
				this.getfightGroupsHome()
			},
			// 公告
			getNoticeList() {
				this.$api.get('/addons/yun_shop/api.php?i=4&type=5&route=plugin.article.api.article.get-articles&category_id=0', {
					page: 1
				}).then(res => {
					this.noticeList.push('最新公告：' + res.data.articles.data[0].title)
				})
			},
			// 更多公告
			getMoreNotice () {
				uni.navigateTo({
					url: '/pages/index/notice-list/notice-list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';

	
	.page-status {
		color: #FFFFFF;

		width: 100%;
		display: flex;
		font-weight: bold;
		// position: fixed;
		// left: 0;
		// right: 0;
		// top: 0;
		padding: 30upx 0upx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		font-size: 31upx;
	}
	uni-image {
		width: 100%;
		height: 100%;
	}
</style>
